<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
	 @IMPORT url("css/base.css");
	 #login{
	width:1340px;
	height:1400px;
	margin-top: 5px;
	}
	
	#login-left{
	width:180px;
	height:100%;
	float: left;
	}
	#login-center{
	width:980px;
	height:100%;
	float:left;
	border-left: 1px #eaebed solid;
	}
	#login-right{
	width:180px;
	height:100%;
	float:left;
	}
	
	
	.gps {
		
		display: block;
		padding: 5px 5px;
		font-size: 14px;
		background: linear-gradient(to right, #eee, #FEFFFE);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: "microsoft yahei";
		margin-bottom: 10px;
		border-radius: 20px;
	}
	.gps a,
	.gps span {
		font-size: 14px;
		float: left;
		padding: 0 5px;
		color: #000000;
		max-width: 250px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.gps img {
		float: left;
		width: 19px;
		height: 19px;
	} 
	
	.input{
	width:100%;
	height:380px;
	margin-top: 20px;
	}
	.input-case{
	width:400px;
	height:340px;
	margin:30px 150px;
	border: 2px #fff solid;
	}
	.input-case:HOVER {
	border-color:#5c85bd; 
	}
	.yonghu{
	width:100%;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:20px;
	color:#437ad7;
	}
	.input-text{
	width:300px;
	height:40px;
	border: 1px white solid; 
	margin: 20px 50px;
	}
	.left{
	width:200px;
	height:100%;
	float: left;
	}
	
	.input-text:HOVER {
	border-color: #5c85bd;
	}
	.click{
	width:100%;
	height:20px;
	}
	.click a {
	color: #0e0f8e;
	margin-right: 2px;
	margin-left:240px;
	float: right;
	}
	a{
	text-decoration: none;
	}
	.click a:HOVER {
	text-decoration: underline;
	}
	.right{
	width:100px;
	height:100%;
	float: right;
	background-color:#3881f0;
	}
	
	.authcode_img b{
	width:20px;
	height:40px;
	display:block;
	float: right;
	font-size:25px;
	}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	
	<script type="text/javascript">
	
	function getAuthCode(){
		var authcode = "";
		var fontStyle = new Array("微软雅黑","Courier New","幼圆","宋体","Dotum","楷书","华文行楷");
		var colors = new Array("#1212c9","#c9b612","#12c930","#c912b1","#12c9c7","#c91f12","#fe7f02");
		var n = 4;
		for(var i=0;i<n;i++){
			var num = parseInt(Math.random()*10);
			authcode += num;
			$(".authcode_img .code"+(i+1)+"").html(num);
			var maxJ = 1;
			for(var j=0;j<maxJ;j++){
				var fontIndex = parseInt(Math.random()*10);
				var colorIndex = parseInt(Math.random()*10);
				if(fontIndex<fontStyle.length&&colorIndex<colors.length){
					$(".authcode_img .code"+(i+1)+"").css("font-family",fontStyle[fontIndex]).css("color",colors[colorIndex]);
				}else{
					maxJ++;
				}
			}
		}
		return authcode;
	}
	$(function(){
		var authcode = getAuthCode();
		$("#authcode").val(authcode);
		$(".authcode_img").click(function(){
			authcode = getAuthCode();
			$("#authcode").val(authcode);
			$("#check_authcode").val("");
		});

	});
	</script>
  </head>
  
  <body>
    <div id="top">
   	<jsp:include page="../../WEB-INF/includes/top.inc.jsp"></jsp:include>
   </div>
   <div id="login">
   			<div id="login-left"></div>
   			<div id="login-center">
   				<div class="center-top">
    					<b>论坛信息：</b>会员 <span>221</span> 人&nbsp;&nbsp; 帖子
					<span>179</span> 篇 &nbsp;&nbsp;&nbsp;&nbsp;
					<b>站长寄语：</b>梦虽然遥不可及，但并不是不可能实现；只要坚持，就会离梦越来越近！
    				</div>
    				
   				<div class="center-body">
   				
   					<div class="center-body-left">
   						<div class="gps">
							<span>您的位置：</span>
							<img alt="首页" src="images/home.png">
							<a href="jsp/public/first.jsp" style="padding-left: 0px;">首页</a>
							<span>&raquo;</span><span>登录</span>
							<div class="clear"></div>
							
							<div class="input">
								<div class="input-case">
								<form action="LoginServlet" method="post">
									<div class="yonghu">
										用户登录
									</div>
									<div class="input-text"><input name="name" type="text" style="width:300px;height:40px"/></div>
									<div class="input-text"><input name="pwd" type="password" style="width:300px;height:40px"/></div>
									<input type="hidden" id="authcode" />
										<div class="input-text">
											<div class="left">
											<input type="text" style="width:300px;height:40px"/>
											</div>
											<div class="right" id="check_authcode">
											
											<div class="authcode_img">
													<b class="code1"></b>
													<b class="code2"></b>
													<b class="code3"></b>
													<b class="code4"></b>
												</div>
												
											</div>
										</div>
									<div class="input-text"><input type="submit" style="width:300px;height:40px;background-color: #398bfb;color: #fff;font-size: 20px;" value="登录"/></div>
									<div class="click"><a href="jsp/public/register.jsp">没有账号？马上注册</a></div>
									</form>
								</div>
							</div>
							
						</div>
   						
   					</div>
   					
   					<div class="center-body-right">
   						<jsp:include page="../../WEB-INF/includes/body.left.inc.jsp"></jsp:include>
   					</div>
   				</div>	
   			
   			</div>
   			<div id="login-right"></div>
   		</div>
   
  <div id="bottom">
   <jsp:include page="../../WEB-INF/includes/bottom.inc.jsp"></jsp:include>
   </div>
  </body>
</html>
	